<template>
  <!-- 指标组件 -->
  <div class="miniIndicator" v-loading="loading">
    <div class="miniIndicator-title">
      <span>{{ data.name }}</span>
    </div>
    <div class="miniIndicator-date">
      <!-- 日期 -->
      <p v-if="screenTime && screenTime.length != 0">
        <span class="left">{{ new Date(screenTime[0]).format("yyyy-MM-dd") }} ~ {{ new Date(screenTime[1]).format("yyyy-MM-dd") }}</span>
      </p>
      <p v-else>
        <span v-if="data.relativelyTime || data.relativelyTime == 0" class="left">{{ relativelyTimeDeal.format("yyyy-MM-dd") }} ~ {{ new Date().format("yyyy-MM-dd") }}</span>
        <span v-else class="left">{{ new Date(data.startTime).format("yyyy-MM-dd") }} ~ {{ new Date(data.endTime).format("yyyy-MM-dd") }}</span>
      </p>
      <!-- el-tooltip -->
      <p class="tooltip-p" v-if="screenTime && screenTime.length != 0">
        <el-tooltip content="筛选时段" placement="bottom" effect="light">
          <img class="right" :src="dateIcon" alt="">
        </el-tooltip>
      </p>
      <p class="tooltip-p" v-else>
        <el-tooltip v-if="data.relativelyTime || data.relativelyTime == 0" :content="`统计时段 相对${ data.relativelyTime/3600/1000/24 == 0 ? '今' : data.relativelyTime/3600/1000/24 }天时段`" placement="bottom" effect="light">
          <img class="right" :src="dateIcon" alt="">
        </el-tooltip>
        <el-tooltip v-else content="统计时段 固定时段" placement="bottom" effect="light">
          <img class="right" :src="dateIcon" alt="">
        </el-tooltip>
      </p>
    </div>
    <div v-if="chartData" class="miniIndicator-number">
      {{ chartData }}
    </div>
    <!-- empty -->
    <el-empty v-else :image="emptyImg" description="暂无数据" :image-size="80" style="width: 100%;height: 102px;"></el-empty>
  </div>
</template>

<script>
// vuex
import store from "@/store";
// 图片
import dateIcon from '@/assets/dataCenter/dataB_dateIcon.png';
import emptyImg from '@/assets/dataCenter/dataB_empty.png';
// API
import {
  dataBoardByChartId,
  dataBoardMerchantGetChatData
} from '@/api/dataCenter/dataBoard.js';
// utils
import { dateStrChangeTimeTamp } from './utils.js'
export default {
  name: 'miniIndicator',
  components: {},
  props: {
    id: {
      type: Number,
      default: () => {
        return null;
      }
    }
  },
  data() {
    return {
      dateIcon,
      emptyImg,
      loading: false,
      relativelyTimeDeal: null,
      data: {},
      chartData: null,
    }
  },
  watch: {
    screenTime: {
      handler(val) {
        this.dataBoardMerchantGetChatDataApi();
      },
      deep: true
    },
    organizationId: {
      handler(val) {
        this.dataBoardMerchantGetChatDataApi();
      },
      deep: true
    }
  },
  mounted() {
    this.dataBoardByChartIdApi();
  },
  methods: {
    // 获取报表表头数据
    async dataBoardByChartIdApi() {
      let res = await dataBoardByChartId({
        id: this.id
      });
      if(res.code === 200) {
        // 处理数据
        this.data = res.payload;
        let start = new Date()
        start.setTime(start.getTime() - this.data.relativelyTime)
        this.relativelyTimeDeal = start;
        if(this.data.relativelyTime === 0) {
          this.relativelyTimeDeal = new Date();
        }
        // 获取chart数据
        this.dataBoardMerchantGetChatDataApi();
      }
    },
    // 获取报表具体数据
    async dataBoardMerchantGetChatDataApi() {
      this.loading = true;
      let startTime;
      let endTime;
      // screenTime为菜单筛选时间
      let screenTime = store.state.user.screenTime;
      if(screenTime && screenTime.length != 0) {
        startTime = dateStrChangeTimeTamp(screenTime[0]);
        endTime = dateStrChangeTimeTamp(screenTime[1]);
      } else {
        // startTime 和 endTime存在即固定时间
        if(this.data.startTime && this.data.endTime) {
          startTime = this.data.startTime;
          endTime = this.data.endTime;
        }
        // relativelyTime存在即相对时间
        if(this.data.relativelyTime) {
          let nowDate = new Date().getTime();
          console.log(nowDate, '222');
          let startDate = nowDate - this.data.relativelyTime;
          startTime = startDate;
          endTime = nowDate;
        }
      }
      let res = await dataBoardMerchantGetChatData({
        id: this.id,
        startTime,
        endTime,
        insId: store.state.insId.insId
      })
      if(res.code === 200) {
        // 具体数值字段获取
        let specialColumn = res.payload.specialColumn.replace('{', '').replace('}', '').split('=');
        let dataKeyName = specialColumn[0];
        // 具体指标字段获取
        let groupColumn = JSON.parse(res.payload.groupColumn.replace(/\\/g, ''));
        let dataValueName = groupColumn[0].columnHumpName;
        // 处理具体数据
        // step1
        let dayData = [];
        res.payload.dayData.forEach(item => {
          let obj = {};
          obj.date = new Date(item.createTime).format("yyyy-MM-dd");
          obj.value = item.dayData;
          dayData.push(obj);
        })
        // step2
        let chartData = [];
        dayData.forEach(item => {
          let obj = {};
          obj.date = item.date;
          obj.value = JSON.parse(item.value.replace(/\\/g, ''));
          chartData.push(obj);
        })
        // step3 、Object.prototype.toString.call(i)
        let num = 0;
        chartData.forEach(item => {
          item.value.forEach(val => {
            for(let i in val) {
              if(String(dataKeyName) === String(i)) {
                num += val[i];
              }
            }
          })
        })
        this.chartData = num;
        this.loading = false;
      }
    }
  },
  computed: {
    screenTime() {
      return store.state.user.screenTime;
    },
    organizationId() {
      return store.state.insId.insId;
    }
  }
}
</script>

<style lang="scss" scoped>
.miniIndicator {
  width: 100%;
  height: 100%;
  &-title {
    width: 100%;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    span {
      font-size: 14px;
      font-weight: 600;
      color: #252934;
      cursor: pointer;
    }
  }
  &-date {
    width: 100%;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .left {
      font-size: 12px;
      color: #6b798e;
    }
    .right {
      margin-left: 18px;
    }
    .tooltip-p {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  &-number {
    width: 100%;
    height: 42px;
    margin: 4px 0;
    font-size: 28px;
    color: #252934;
    font-family: AlibabaSans102-Bd;
    line-height: 42px;
    font-weight: 600;
  }
}
</style>